<!DOCTYPE html>
<html style="width:100%;height:100%;overflow:hidden;">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC repeated widget test</title>

		<style type="text/css">
			@import "../../../dijit/themes/dijit.css";
			@import "../../../dijit/themes/claro/document.css";
			@import "../../../dijit/tests/css/dijitTests.css";
		</style>

		<!-- required: a default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

		<!-- required: dojo.js -->
		<script type="text/javascript">
			dojoConfig = {
				isDebug: 1,
				parseOnLoad: 0,
				async: 1,
				mvc: {debugBindings: 1}
			};
		</script>
		<script type="text/javascript" src="../../../dojo/dojo.js"></script>

		<script type="text/javascript">
			require([
				"dojo/dom",
				"dojo/dom-class",
				"dojo/parser",
				"dijit/_WidgetBase",
				"dojox/mvc/at",
				"dojox/mvc/getStateful",
				"dojox/mvc/Templated",
				"dojox/mvc/WidgetList",
				"dojo/text!dojox/mvc/tests/test_WidgetList_childTemplate.html",
				"dojo/text!dojox/mvc/tests/test_WidgetList_childBindings.json",
				"dijit/form/TextBox" // dijit._WidgetsInTemplateMixin does not support auto-loading modules by parser
			], function(dom, domClass, parser, _WidgetBase, at, getStateful, Templated, WidgetList, childTemplate, childBindings){
				array = getStateful([
					{
						Serial: "A111",
						First: "Anne",
						Last: "Ackerman",
						Location: "NY",
						Office: "1S76",
						Email: "a.a@test.com",
						Tel: "123-764-8237",
						Fax: "123-764-8228"
					},
					{
						Serial: "B111",
						First: "Ben",
						Last: "Beckham",
						Location: "NY",
						Office: "5N47",
						Email: "b.b@test.com",
						Tel: "123-764-8599",
						Fax: "123-764-8600"
					},
					{
						Serial: "C111",
						First: "Chad",
						Last: "Chapman",
						Location: "CA",
						Office: "1278",
						Email: "c.c@test.com",
						Tel: "408-764-8237",
						Fax: "408-764-8228"
					}
				]);

				arrayAlt = getStateful([
					{
						Serial: "D111",
						First: "David",
						Last: "Durham",
						Location: "NJ",
						Office: "C12",
						Email: "d.d@test.com",
						Tel: "514-764-8237",
						Fax: "514-764-8228"
					},
					{
						Serial: "E111",
						First: "Emma",
						Last: "Eklof",
						Location: "NY",
						Office: "4N76",
						Email: "e.e@test.com",
						Tel: "123-764-1234",
						Fax: "123-764-4321"
					}
				]);

				domClass.add(dom.byId("loading"), "dijitDisplayNone");
				domClass.remove(dom.byId("main"), "dijitDisplayNone");
				parser.parse();

				(new WidgetList({
					children: array,
					childParams: {
						startup: function(){
							this.labelNode.set("value", at("rel:", "Serial"));
							this.inputNode.set("value", at("rel:", "First"));
							this.inherited("startup", arguments);
						}
					},
					templateString: childTemplate
				}, dom.byId("programmaticRepeat"))).startup();

				(new WidgetList({
					children: array,
					templateString: childTemplate,
					childBindings: eval("(" + childBindings + ")")
				}, dom.byId("programmaticRepeatWithSeparateBindingDeclaration"))).startup();
			});
		</script>
	</head>
	<body class="claro" style="width:100%;height:100%;margin:0;padding:8px;overflow:hidden;">
		<script type="dojo/require">at: "dojox/mvc/at", Stateful: "dojo/Stateful"</script>
		<table id="loading" style="width:100%;height:100%;" border="0" cellpadding="0" cellspacing="0">
			<tbody>
				<tr>
					<td align="center">Loading...</td>
				</tr>
			</tbody>
		</table>
		<div id="main" class="dijitDisplayNone" style="width:100%;height:100%;">
			<div>
				<h1>Repeating simple text box and label</h1>
				<div data-dojo-type="dojox/mvc/WidgetList"
				 data-dojo-props="children: array"
				 data-mvc-child-type="dijit/form/TextBox"
				 data-mvc-child-props="value: at(this.target, 'First')"></div>
				<span data-dojo-type="dojox/mvc/WidgetList"
				 data-dojo-props="children: array"
				 data-mvc-child-type="dijit/_WidgetBase"
				 data-mvc-child-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(this.target, 'First')"></span>
			</div>
			<div>
				<h1>Repeating in-line template</h1>
				<div data-dojo-type="dojox/mvc/WidgetList"
				 data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
				 data-dojo-props="children: array, partialRebuild: true">
					<script type="dojox/mvc/InlineTemplate">
						<div>
							<span data-dojo-type="dijit/_WidgetBase"
							 data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at('rel:', 'Serial')"></span>: 
							<span data-dojo-type="dijit/form/TextBox"
							 data-dojo-props="value: at('rel:', 'First')"></span>
						</div>
					</script>
				</div>
			</div>
			<div>
				<h1>Repeating programmatically created template widget</h1>
				<div id="programmaticRepeat"></div>
			</div>
			<div>
				<h1>Repeating programmatically created template widget, with separate data binding declaration from template</h1>
				<div id="programmaticRepeatWithSeparateBindingDeclaration"></div>
			</div>
			<div>
				<h1>Modifying array elements</h1>
				<input type="button" value="Replace" onclick="array.splice.apply(array, [1, 1].concat(arrayAlt)); this.disabled = true;">
			</div>
		</div>
	</body>
</html>
